<template>
	<view class="content">
		<view class="cons">
			<view style="font-size: 45rpx;">{{datalist.title}}</view>
			<view class="tou">
				<image
					src="https://img2.baidu.com/it/u=170237391,555920326&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1691773200&t=26d0bb603aba6903af9163ba3c2bea8c"
					mode=""></image>
				<view class="text">
					<view class="name">
						钓鱼大神
						<view class="yuan">
							原创 3小时前 13568阅
						</view>
					</view>
					<view class="guanzhu">
						<van-button plain size="small" type="primary">关注</van-button>
					</view>
				</view>
			</view>

			<text class="article_content">{{tempContent}}</text>
			<view class="intro_toggle" v-if="txt_content !== null && txt_content.length > 385">
				<text class="quanwen" v-if="isShowAllContent" @click="toggleDescription">
					查看全部
					<image src="@/static/cbbx.png"></image>
				</text>
				<text class="quanwen" v-else @click="toggleDescription">
					收起
					<image src="@/static/home/cbbx.png"></image>
				</text>
			</view>
			<view class="butt">
				<view @click="beFondOfClick" class="imgBox">
					<van-button plain round  icon="good-job-o" type="default" v-if="!this.beFondOf">126</van-button>
					<van-button plain round  icon="good-job-o" type="danger" v-if="this.beFondOf">127</van-button>
				</view>
				<van-button plain icon="bulb-o" round  type="default">举报</van-button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				datalist: {},
				//2.展开收起-参数
				isShowAllContent: false,
				txt_content: [],
				tempContent: '',
				beFondOf: false
			}

		},
		onLoad(option) {
			console.log("我是传递过去的数据：", JSON.parse(option.item));
			this.datalist = JSON.parse(option.item)
			this.txt_content = JSON.parse(option.item).content

			//3.进入页面处理（展开收起）数据
			var that = this
			var txtCntIndex = that.txt_content.length
			if (txtCntIndex > 385) {
				that.isShowAllContent = true
				that.tempContent = that.txt_content.substr(0, 385) + "..."
			} else {
				that.isShowAllContent = false
				that.tempContent = that.txt_content
			}
		},


		methods: {
			// 4.点击 展开与收起，处理文本
			toggleDescription: function() {
				var that = this
				if (that.isShowAllContent) {
					that.isShowAllContent = false
					that.tempContent = that.txt_content
				} else {
					that.isShowAllContent = true
					that.tempContent = that.txt_content.substring(0, 385) + "..."
				}
			},
			beFondOfClick() {
				// console.log(it);
				this.beFondOf = !this.beFondOf
			}
		},

	}
</script>

<style lang="scss">
	.tou {
		display: flex;
		width: 100%;
		line-height: 50rpx;

		image {
			width: 20%;
			border-radius: 50%;
			height: 120rpx;
		}

		.text {
			justify-content: space-around;
			width: 100%;
			display: flex;

			.yuan {
				font-size: 20rpx;
				color: gray;
			}


		}
	}

	.cons>view,
	.cons>h2 {
		padding: 20rpx 5rpx 20rpx 20rpx;
	}

	.intro_toggle {
		color: royalblue;
		text-align: center;
	}

	.butt {
		display: flex;
		justify-content: space-around;
	}
</style>